<template>
  <div class="information">
    <head_top title_head="-- 商家 --"></head_top>
    <div class="ref_ok" :class="{'show3':popupVisible}">刷新成功</div>
    <div class="info-wrap" ref="wrapper">
      <div class="info">
        <mt-loadmore class="loadMore" :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" @top-status-change="handleTopChange" @bottom-status-change="handleBottomChange" ref="loadmore">
          <ul style="width: 100%">
            <li style="display: block;width: 100%" v-for="(item,index) in getGoods">
              <div class="goods">
                <div class="goods-icon">
                  <img class="img-responsive" src="../../image/head_02.png" alt="">
                </div>
                <div class="goods-detail">
                  <span>{{item.introduce}} {{item.title}}</span>
                  <span class="price">
                    <span>¥{{item.price}}</span>
                    <span>剩余{{item.surplus}}</span>
                    <span style="width: 20px;margin: 0 10px;" @click="decrement(index)"><img class="img-responsive" src="../../image/less1.png" alt=""></span>
                    <span style="display: inline-block;white-space: nowrap;flex: 0;color: orange">{{item.num}}份</span>
                    <span style="width: 20px;margin-left:10px;" @click="increment(index)"><img class="img-responsive" src="../../image/add1.png" alt=""></span>
                  </span>
                </div>
              </div>
            </li>
          </ul>
          <div slot="top" class="mint-loadmore-top">
            <span v-show="topStatus === 'pull'" :class="{ 'rotate': topStatus === 'pull' }">下拉刷新</span>
            <span v-show="topStatus === 'drop'" :class="{ 'rotate': topStatus === 'drop' }"><img src="../../image/loading1.gif" alt=""></span>
            <span v-show="topStatus === 'loading'"><img src="../../image/loading1.gif" alt=""></span>
          </div>
          <div slot="bottom" class="mint-loadmore-bottom">
            <span v-show="bottomStatus === 'pull'" :class="{ 'rotate': bottomStatus === 'pull' }">加载更多</span>
            <span v-show="bottomStatus === 'drop'" :class="{ 'rotate': bottomStatus === 'drop' }"><img src="../../image/loading1.gif" alt=""></span>
            <span v-show="bottomStatus === 'loading'"><img src="../../image/loading1.gif" alt=""></span>
          </div>
        </mt-loadmore>
      </div>
    </div>
    <div class="shade" :class="{ 'show2': getFaker }">
      <span><img src="../../image/loading1.gif" alt=""></span>
      <span>努力加载中...</span>
    </div>
    <transition name="fade" mode="out-in"><router-view class="info-contariner"></router-view></transition>
  </div>
</template>

<script>
  import head_top from '../header'
  import BScroll from 'better-scroll'
  import { mapGetters, mapActions } from 'vuex'
  export default {
    name: 'information',
    data () {
      return {
        menuScroll: null,
        data:[],
        allLoaded: false,
        topStatus: '',
        bottomStatus: '',
        allPrice: 0,
        tog: false,
        popupVisible: false,
      }
    },
    components: {
      head_top,
    },
    created() {
//      this.$http.get('http://localhost:8080/static/goodsData.json')
//          .then(function(res){
//            this.$store.state._goods = res.data.data;
//          }).catch(function(err){
//          console.log(err)
//        })
    },
    mounted: function() {
    },
    computed: mapGetters([
      'getGoods',
      'getPrice',
      'getFaker'
    ]),
    methods: {
      ...mapActions([
        'decrement',
        'increment',
        'reqAxios',
      ]),
      loadTop() {
        var self = this;
         self.refresh();
        this.$refs.loadmore.onTopLoaded();
      },
      loadBottom() {
        var self = this;
          self.reqAxios();
//        if(this.lists === 20){
//          this.allLoaded = true;// 若数据已全部获取完毕
//        }
        this.$refs.loadmore.onBottomLoaded();
      },
      handleTopChange(status) {
        this.topStatus = status;
      },
      handleBottomChange(status) {
        this.bottomStatus = status;
      },
      reqAxios () {
        this.$store.dispatch('reqAxios')
      },
      refresh(){
        var self = this;
        self.popupVisible = true;
        self.$http.get('./static/goodsData.json')
          .then(function(res){
            self.$store.state._goods = res.data.data;
            self.$store.state._goodsInfo = [];
            setTimeout(function(){self.popupVisible = false;},1000)
          }).catch(function(err){
          console.log(err)
        })
      },
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .information {
    margin-top: 50px;
    background: #eeeeee;
    overflow-y: auto;
    margin-bottom: 40px;
    height: 100%;
  }
  .info-wrap {
    height: 100%;
    /*margin-top: 50px;*/
  }
  .info > div {
    display: flex;
    align-items: center;
    margin-bottom: 3px;
    /*padding: 5px 5px 5px 10px;*/
    box-shadow:2px 2px 2px #eeeeee;
    background: white;
  }
  .detail-icon{
    width: 50px;
    height: 50px;
  }
  .detail-address {
    flex: 1;
    text-align: left;
    padding-left: 10px;
  }
  .detail-address > span {
    display: block;
    font-size: 14px;
  }
  .goods {
    position: relative;
    display: flex;
    align-items: center;
  }
  .goods-icon {
    width: 60px;
    height: 60px;
  }
  .goods-detail {
    flex: 1;
    padding: 0 15px;
    display: flex;
    flex-direction: column;
    text-align: left;
  }
  .goods-detail .price {
    display: flex;
    align-items: center;
    margin-top: 6px;
    color: #2aaa6d;
  }
  .goods-detail .price span:nth-child(1) {
    flex: 1;
    text-align: center;
  }
  .goods-detail .price span:nth-child(2) {
    flex: 1;
    text-align: center;
  }
  .goods .car {
    position: absolute;
    right: 0px;
    bottom: 5px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: orange url("../../image/car.png") no-repeat center;
    background-size: 22px;
  }
  li {
    margin: 0;
    /*margin-bottom: 10px;*/
    padding: 6px;
    border-bottom: 2px solid #eeeeee;
  }
  .shade {
    position: absolute;
    z-index: 999;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 100px;
    height: 100px;
    border-radius: 10px;
    background: rgba(0,0,0,.2);
  }
  .shade > span{
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
  }
  .ref_ok {
    position: absolute;
    top: -50px;
    z-index: 666;
    line-height: 50px;
    text-align: center;
    width: 100%;
    height: 50px;
    background: rgba(0,0,0,.6);
    color: white;
    transition: all .5s;
  }
  .show2{
    display: flex;
  }
  .show3{
    top: 0;
  }
</style>
